<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('用户编辑')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="loginName" class="layui-form-label">
                    <span class="x-red">*</span>登录用户名
                </label>
                <div class="layui-input-block">
                    <input type="text" id="loginName" disabled="true" th:name="loginName"
                           th:value="${sysuserInfo.loginName}" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="userName" class="layui-form-label">
                    <span class="x-red">*</span>用户昵称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="userName" th:name="userName"
                           th:value="${sysuserInfo.userName}" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="phonenumber" class="layui-form-label">
                    <span class="x-red">*</span>联系方式
                </label>
                <div class="layui-input-block">
                    <input type="text" th:value="${sysuserInfo.phonenumber}" id="phonenumber" name="phonenumber"
                           required="" lay-verify="phone"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>邮箱地址
                </label>
                <div class="layui-input-block">
                    <input type="text" id="L_email" name="email" th:value="${sysuserInfo.email}" required=""
                           lay-verify="email"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="L_post" class="layui-form-label">
                    <span class="x-red">*</span>岗位
                </label>
                <div class="layui-input-block">
                    <ul id="L_post" class="dtree" data-value="" data-id="0" lay-verify="postVerify"></ul>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>角色</label>
                <div class="layui-input-block">
                    <input th:each="sysRole:${sysRolesInfo}" name="role" type="checkbox" th:value="${sysRole.roleId}"
                           lay-skin="primary" th:checked="${sysRole.flag}"
                           th:title="${sysRole.roleName}">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_dept" class="layui-form-label">
                    <span class="x-red">*</span>部门
                </label>
                <div class="layui-input-block">
                    <input type="text" id="L_dept" name="deptName" required="" lay-verify="deptName"
                           autocomplete="off" class="layui-input" placeholder="单击选择部门" th:value="${sysDept.deptName}">
                    <input type="text" hidden="true" id="deptId" name="deptid" th:value="${sysDept.deptId}">
                </div>
            </div>
            <div class="layui-form-item">
                <input hidden="true" type="text" name="userId" id="userId" th:value="${sysuserInfo.userId}">
            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="add" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>

<th:block th:include="include :: dtree_js"/>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<script>

    layui.use(['form', 'layer', 'dtree'], function () {
        $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var dtree = layui.dtree;

        //自定义验证规则
        form.verify({
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });


        //岗位下拉树
        var postTree = dtree.renderSelect({
            elem: '#L_post',
            // width: '100%',
            url: ctx + 'system/post/userPostDTree',
            // method: 'POST',
            checkbar: true, // 设置复选框
            checkbarType: "self",
            selectInitVal: "1,2",
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            dataFormat: "list",  //配置data的风格为list
            response: {
                message: "msg",
                statusCode: 0,
                statusName: 'code',
                rootName: 'data',
                treeId: "id", //节点ID（必填）
                parentId: "parentId", //父节点ID（必填）
                title: "title", //节点名称（必填）
                checkArr: "checkArr", //复选框列表（开启复选框必填，默认是json数组。）
            },  //修改response中返回数据的定义
            request: {userId: $('#userId').val()},
            success: function (data, ul, first) {
                // console.log(data);
            },
            done: function (res, $ul, first) {
                // var params = postTree.getCheckbarJsonArrParam("#L_post");
                // // 也里指定，第二个参数如果不填，则会自动返显当前选中的数据
                //  var selectParam = dtree.selectVal("#L_post"); //可以在这
                // postTree.selectVal('L_post',selectParam);
            }
        });


        //部门树 下拉
        $('#L_dept').click(function () {
            var deptTree = null;
            layer.open({
                type: 1,
                title: '部门树',
                area: ["500px", "80%"],
                content: '<ul id="DeptTree" class="dtree" data-id="0"></ul>',
                success: function (layero, index) {
                    deptTree = dtree.render({
                        elem: '#DeptTree',
                        url: ctx + 'system/dept/detpDtree',
                        method: 'POST',
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        icon: ["0", "5"],
                        response: {
                            statusName: "code", //返回标识（必填）
                            statusCode: 0, //返回码（必填）
                            message: "msg", //返回信息（必填）
                            rootName: "data", //根节点名称（必填）
                            treeId: "id", //节点ID（必填）
                            parentId: "parentId", //父节点ID（必填）
                            title: "title", //节点名称（必填）
                        },
                        success: function (data, ul, first) {
                            // console.log(data);
                            dtree.chooseDataInit("DeptTree", "100,102");
                        },
                        done:function (res, $ul, first) {
                        }

                    });

                    // 绑定节点的双击
                    dtree.on("nodedblclick('DeptTree')", function (obj) {
                        $("#L_dept").val(obj.param.context);
                        $("#deptId").val(obj.param.nodeId);
                        layer.close(index);
                    });
                },

                yes: function (_index, _layero) {
                    var param = dtree.getNowParam("DeptTree"); // 获取当前选中节点

                    $("#deptId").val(param.nodeId);
                    $("#L_dept").val(param.context);
                    layer.close(index);
                }
            });
        });


        //监听提交
        form.on('submit(add)',
            function (data) {

                // 获取角色信息
                var _roleIds = "";
                $('input:checkbox[name="role"]:checked').each(function (index, element) {
                    if (index == 0) {
                        _roleIds = $(this).val();
                    } else {
                        _roleIds += "," + $(this).val();
                    }
                });

                var _postParam = postTree.getCheckbarNodesParam("#L_post");
                var postParamArr = _postParam.map((item, index) => {
                    return item.nodeId
                }).join();

                $.ajax({
                    url: ctx + "system/user/edituser",
                    method: 'POST',
                    data: {
                        userId: $('#userId').val(),
                        loginName: $('#loginName').val(),
                        userName: $('#userName').val(),
                        email: $('#L_email').val(),
                        phonenumber: $('#phone').val(),
                        password: $('#L_repass').val(),
                        deptId: $('#deptId').val(),
                        postIds: postParamArr,
                        roleIds: _roleIds,
                    },
                    success: function (res) {
                        if (res.code === 0) {
                            //关闭当前frame
                            layer.msg("修改成功");
                            //表格刷新
                            parent.layui.table.reload("userlist");
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        } else {
                            layer.msg(res.msg);
                        }
                    }
                });


                return false;
            });

    });
</script>
</body>

</html>
